<template>
  <!-- 列表页模板组件 -->
  <div id="app">
    <TemplistVarchar ref="formPage">
      <a-form layout="inline" slot="top" @submit="getList">
        <a-form-item label="姓名">
          <a-input v-focus v-model="form.name" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="年龄">
          <a-input v-model="form.age" placeholder="请输入" />
        </a-form-item>
        <SearchBtnGroup />
      </a-form>

      <a-space slot="btns">
        <a-button type="primary" icon="api" @click="msgShow"> 提示消息 </a-button>
        <a-button type="primary" icon="safety-certificate" @click="confirmShow"> 确认框 </a-button>
        <a-button type="primary" icon="switcher" @click="showPopup = true"> 对话框 </a-button>
      </a-space>
      <div slot="content">
        <Table :rowHeader="rowHeader" :tableData="tableData" :tableHeight="tableHeight" @edit="rowEdit"> </Table>
      </div>
      <Pagination slot="pagination" :total="listQuery.total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
    </TemplistVarchar>
    <!-- 组件集合 -->
    <div>
      <Popup title="这个一个title" :showPopup="showPopup" @sesionCallback="sesionCallback"> </Popup>
    </div>
  </div>
</template>

<script>
import { Message, ConfirmMsg } from '@/utils/common'
import autoHeight from '@/mixins/autoHeight.js'
export default {
  name: 'Sales',
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      },
    },
  },
  mixins: [autoHeight],

  data() {
    return {
      form: {
        name: '',
        age: null,
      },
      tableData: [],
      listQuery: {
        total: 0,
        page: 0,
        limit: 0,
      },
      showPopup: false,
      rowHeader: [
        // 未做任何格式化处理的数据
        {
          prop: 'name',
          label: '姓名',
        },
        // 格式化为字符串
        {
          prop: 'sex',
          label: '性别',
          render: (h, { row }) => {
            return h('span', row.sex ? '男' : '女')
          },
        },
        {
          prop: 'age',
          label: '年龄',
          render: (h, { row }) => {
            return h('span', row.age + '岁')
          },
        },
        // 插入组件或标签内容（例：进度条组件）
        {
          prop: 'score',
          label: '分数',
          render: (h, { row }) => {
            return h(
              'a-tooltip',
              {
                props: { placement: 'right' },
              },
              [
                <template slot="title">
                  <span> {row.score}</span>
                </template>,
                h('a-progress', {
                  props: {
                    strokeColor: {
                      '0%': 'rgb(251 158 158)',
                      // "50%": "rgb(140, 197, 255)",
                      '100%': 'rgb(198 249 173)',
                    },
                    status: 'active',
                    percent: row.score,
                    format: percent => percent,
                  },
                }),
              ],
            )
          },
        },
      ],
    }
  },
  created() {
    for (let i = 0; i < 30; i++) {
      this.tableData.push({
        id: i,
        name: 'leo',
        sex: 1,
        age: 25,
        score: Math.ceil(Math.random(0, 30) * 100),
      })
    }
  },
  methods: {
    getList(e) {
      e.preventDefault()
      console.log(this.form)
    },
    msgShow() {
      Message('success', '提示消息')
      Message('info', '提示消息')
      Message('warning', '提示消息')
      Message('error', '提示消息')
    },
    confirmShow() {
      ConfirmMsg('warning', '提示', '这是一条提示吗?', () => {
        console.log('object')
      })
    },
    sesionCallback({ isConfirm, operation }) {
      !isConfirm
        ? (this.showPopup = false)
        : operation((resolve, reject) => {
            setTimeout(() => {
              console.log('我是ok按钮 我被点击到了')
              this.showPopup = false
              return resolve(false)
            }, 2000)
          })
    },
    rowEdit(row) {
      console.log(row)
    },
  },
}
</script>
<style>
body {
  margin: 0;
}
</style>
<style lang="scss" scoped>
#app {
  box-sizing: border-box;
  height: 100%;
  color: #2c3e50;
  .left-content {
    width: 200px;
    resize: horizontal;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    overflow-y: scroll;
    margin-right: 10px;
  }
}
</style>
